<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>侦听器 watch</title>
</head>
<body>
    <div id="app">
        爱好
        <select v-model="hobby">
            <option value="">请选择</option>
            <option value="1">写作</option>
            <option value="2">画画</option>
            <option value="3">运动</option>
        </select>
        <hr/>
        年
        <select v-model="date.year">
            <option value="">请选择</option>
            <option value="2023">2023</option>
            <option value="2024">2024</option>
            <option value="2025">2025</option>
        </select>
        月
        <select v-model="date.month">
            <option value="">请选择</option>
            <option value="10">10</option>
            <option value="11">11</option>
            <option value="12">12</option>
        </select>
    </div>

    <script type="module">
        import {createApp, reactive, ref, watch} from './js/vue.esm-browser.js'

        /*
          v-text 和插值表达式完成功能一致
        */
        createApp({
            // setup选项，用于设置响应式数据和方法等 
            setup() {
                const hobby = ref("")

                const date = reactive({
                    year: "2023",
                    month: "10"
                })

                watch(hobby, (newValue, oldValue)=>{
                    console.log("newValue: ", newValue, "oldValue", oldValue);
                    if (newValue === "2") {
                        console.log("draw");
                    }
                })
                watch(date, (newValue, oldValue)=>{
                    /*
                        JS中对象和数组是通过引用传递的，不是值传递
                        当修改对象或数组的值时，实际上修改的对象或数组的引用，而不是创建一个新的对象或数组
                        所以，如果修改对象或数组的值，那么打印出来的结果则是修改后的值

                        指定监听对象的为手动监听
                    */
                    console.log("newValue: ", newValue, "oldValue", oldValue);
                    if (newValue.year === "2024") {
                        console.log("2024");
                    }
                    if (newValue.month === "11") {
                        console.log("11");
                    }
                })

                watch(()=>date.year, (n, o)=>{
                    console.log("newValue: ", n, "oldValue", o);
                    if (n == "2023") {
                        console.log("2023");
                    }
                })

                return {
                    title: "侦听器 watch",
                    hobby,
                    date
                }
            }
        }).mount("#app")
    </script>
</body>
</html>